<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="">
			<el-form-item><el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input></el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
				<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
			<el-table-column prop="nickName" header-align="center" align="center" label="昵称"></el-table-column>
			<el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
			<el-table-column prop="avatar" header-align="center" align="center" label="头像">
				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px" :src="scope.row.avatar" fit="contain"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="age" header-align="center" align="center" label="年龄"></el-table-column>
			<el-table-column prop="sex" header-align="center" align="center" label="性别"></el-table-column>
			<el-table-column prop="height" header-align="center" align="center" label="身高"></el-table-column>
			<el-table-column prop="weight" header-align="center" align="center" label="体重"></el-table-column>
			<el-table-column prop="tags" width="200px" header-align="center" align="center"
				label="标签"></el-table-column>
			<el-table-column prop="createTime" header-align="center" align="center" label="注册时间">
				<template slot-scope="scope">
					{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
				</template>
			</el-table-column>
			<el-table-column prop="modifyTime" header-align="center" align="center" label="修改时间">
				<template slot-scope="scope">
					{{ dayjs(scope.row.modifyTime).format('YYYY-MM-DD HH:mm:ss') }}
				</template>
			</el-table-column>
			<el-table-column prop="profile" width="100px" header-align="center" align="center"
				label="个人简介"></el-table-column>
			<el-table-column prop="achievement" header-align="center" align="center" label="成就/勋章"></el-table-column>
			<el-table-column prop="role" header-align="center" align="center" label="角色"></el-table-column>
			<el-table-column prop="status" header-align="center" align="center" label="账号状态"></el-table-column>
			<el-table-column prop="points" header-align="center" align="center" label="积分"></el-table-column>
			<el-table-column header-align="center" align="center" width="150" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination align="right" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
			:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
			layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
	</div>
</template>

<script>
	import AddOrUpdate from './user-add-or-update';
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				dataForm: {
					key: ''
				},
				dataList: [],
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataListLoading: false,
				dataListSelections: [],
				addOrUpdateVisible: false
			};
		},
		components: {
			AddOrUpdate
		},
		created() {
			this.getDataList();
		},
		methods: {
			// 获取数据列表
			getDataList() {
				this.dataListLoading = true;
				let data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				};
				this.$http.post('/user/searchAllUserByPage', data).then(resp => {
					if (resp.data.code === 200) {
						let result = resp.data;
						this.dataList = result.list;
						this.totalPage = result.totalCount;
						console.log('响应结果', resp.data);
						this.dataListLoading = false;
					}
				});
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val;
				this.pageIndex = 1;
				this.getDataList();
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageIndex = val;
				this.getDataList();
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val;
			},
			// 新增 / 修改
			addOrUpdateHandle(id) {
				this.addOrUpdateVisible = true;
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id);
				});
			},
			// 删除
			deleteHandle(id) {
				var ids = id ?
					[id] :
					this.dataListSelections.map(item => {
						return item.id;
					});
				this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('/mall/user/delete'),
						method: 'post',
						data: this.$http.adornData(ids, false)
					}).then(({
						data
					}) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.getDataList();
								}
							});
						} else {
							this.$message.error(data.msg);
						}
					});
				});
			}
		}
	};
</script>